<template>
  <div  v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
    <label>当前在线人数{{this.tableData.length}}</label>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      height="950">
      <el-table-column
        prop="uid"
        label="UID">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="date"
        label="上线时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="IP">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-edit" circle size="mini"></el-button>
          <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      v-show="this.tableData.length > 20"
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      :page-size="20"
      :total="1000">
    </el-pagination>
  </div>

</template>

<script>
  import axios from 'axios'
  export default {
    created(){
      if(this.$store.getters.isShow){
        this.requestData()
      }else {
        this.loading = false
      }
    },
    methods: {
      requestData(){
        axios.get("/online").then(resp => {
          if(resp.data.result){
            this.tableData = resp.data.msg
          }else {
            alert(resp.data.error)
          }
          this.loading = false;
        }).catch(err => {
          alert(err)
          this.loading = false;
        })
      },
      handleClick(row) {
        this.$router.push({
          path : '/userEdit',
          query:{
            uid : row.uid,
            userName: row.userName,
            scenes: 'home'
          }
        });
      },
      deleteRow(index,rows){
        let row = rows[index]
        this.$confirm('是否将玩家<<'+row.userName+'>>封号并且踢下线?', '封号', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.loading = true;
          axios.get("/kicking",{
            params:{
              uid:row.uid
            }
          }).then(resp => {
            if(resp.data.result){
              rows.splice(index, 1);
              //请求服务器是否可以封号
              this.$message({
                type: 'success',
                message: resp.data.msg
              });
            }else {
              this.$message({
                type: 'success',
                message: resp.data.error
              });
            }
            this.loading = false;
          })

        }).catch(() => {
          this.loading = false;
          console.log('取消');
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
    data() {
      return {
        loading:true,
        tableData: []
      }
    }
  }
</script>

<style scoped>

</style>
